﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>费用报销单</title>
    <link href="../../Scripts/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
    <script src="../../Scripts/jquery-easyui/jquery.min.js"></script>
    <script src="../../Scripts/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="../../Scripts/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <link href="../../Content/themes/icon.css" rel="stylesheet" />
    <link href="../../Content/themes/table.css" rel="stylesheet" />
    <link href="../../Content/formstyles.css" rel="stylesheet" />
    <script src="../../Content/js/common.js"></script>
   
</head>
<body>
    <div id="ui_main_layout" class="easyui-layout" data-options="fit:true,border:false">
        <div data-options="region:'north',split:false,border:false,collapsed:false" title="" style="height:120px;">
            <div class="easyui-panel" title="基本信息" style="width:100%;height:auto;padding:10px;">            
                <div>                    
                    <input type="text" class="easyui-textbox" id="claimBy" data-options="width:200,label:'报销人：',labelPosition:'before',labelWidth:80,labelAlign:'right', required:true,disabled:false" />
                    <input class="easyui-combobox" id="claimDept" name="claimDept" data-options="
                           editable:false,
                           width:200,
                           label:'所在部门：',
                           labelPosition:'before',labelWidth:80,labelAlign:'right',
                           required:true, valueField: 'DepartmentName', textField: 'DepartmentName',url: '/Common/SelectDepartment' ">
                    <input type="text" id="claimTime" class="easyui-datebox" data-options="width:200,label:'报销时间：',labelPosition:'before',labelWidth:80,labelAlign:'right',disabled:false" />
                    <input class="easyui-combobox" id="periodEdit" name="period" data-options="editable:false,
                                width:200,
                           label:'财务期间：',labelWidth:80,
                           labelPosition:'before',labelAlign:'right',
                               valueField: 'InfoName', textField: 'InfoName',url: '/Common/SelectBasicInfo?p=815' ">  
                </div> <div>
                           <input id="claimRemark" class="easyui-textbox" data-options="width:400,height:40,label:'摘要：',labelWidth:80,labelPosition:'before',labelAlign:'right',multiline:true,prompt:'某某人报销某费用',">
                           <input type="text" class="easyui-textbox" id="total" data-options="width:200,label:'总金额：',labelPosition:'before',labelWidth:80,labelAlign:'right',editable:false" />

</div> 
</div> 
           
        </div>
        <div data-options="region:'center',border:false">       

            <table id="dg"> </table>
            <div id="toolbar">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newEntry()">新增</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editEntry()">修改</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destroyEntry()">删除</a>
            </div>

            <div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:[{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){saveEntry()}
			},{
				text:'取消',
				iconCls:'icon-cancel',
				handler:function(){$('#dlg').dialog('close')}
			}]">
                <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
                    <div style="margin-bottom:2px">
                        <input name="projectNo" id="projectNo" class="easyui-combox"  label="项目编码:" style="width:100%">                          
                    </div>
                    <div style="margin-bottom:10px">
                        <input name="projectName" id="projectName" class="easyui-textbox" label="项目名称:" style="width:100%" data-options="editable:false,">
                    </div>
                    <div style="margin-bottom:10px">
                        <input class="easyui-combobox" id="feeType" name="feeType" data-options="editable:false,
                                width:'100%',
                           label:'费用类别：',
                           labelPosition:'before',labelWidth:80,labelAlign:'right', required:true,
                               valueField: 'InfoName', textField: 'InfoName',url: '/Common/SelectBasicInfo?p=801' ">
                        <input class="easyui-combobox" id="feeName" name="feeName" data-options="editable:false,
                                width:'100%',
                           label:'费用名称：',
                           labelPosition:'before',labelAlign:'right', required:true,
                               valueField: 'InfoName', textField: 'InfoName',url: '/Common/SelectBasicInfo?p=802' ">
                    </div>
                    <div style="margin-bottom:10px">
                        <input class="easyui-combobox" id="dept" name="dept" data-options="
                           editable:false,
                           width:200,
                           label:'承担部门：',
                           labelPosition:'before',labelWidth:80,labelAlign:'right',
                           required:true, valueField: 'DepartmentName', textField: 'DepartmentName',url: '/Common/SelectDepartment' ">
                    </div>
                    <div style="margin-bottom:10px">
                        <input name="amount" class="easyui-textbox" required="true" validtype="currency" label="金额:" style="width:100%">
                    </div>
                    <div style="margin-bottom:10px">
                        <input name="remark" class="easyui-textbox" label="备注:" style="width:100%">
                    </div>
                </form>
            </div>
           
            <script type="text/javascript">
                function getQueryParam(name) {
                    var obj = $('#ui_main_dialog').dialog('options');
                    var queryParams = obj["queryParams"];
                    return queryParams[name];
                }
                var rowId = 0;
                var claimId = getQueryParam("claimId") || "";//传入的查询单据号

                $(function () {     
                    // alert(claimId);
                    $("#dg").datagrid({       //初始化datagrid
                        url: "../../Financial/getExpenseEntry?id=" + claimId,
                        toolbar: '#toolbar',
                        columns: [[
                        { field: "projectNo", width: "80", title: "项目编码" },
                        { field: "projectName", width: "120", title: "项目名称" },
                        { field: "dept", width: "100", title: "承担部门" },
                        { field: "feeType", width: "80", title: "费用类别" },
                        { field: "feeName", width: "80", title: "费用科目" },
                        { field: "amount", width: "80", title: "金额", formatter: getCurrency },
                        { field: "remark", width: "100", title: "备注" },
                        ]],
                        title: "报销费用明细",
                        width: 700,
                        height: 250,
                        pagination: true,
                        rownumbers: true,
                        fitcolumns: true,
                        singleSelect: true,
                        onLoadSuccess: function (data) {                            
                            //更新总金额
                            var total = 0
                            for (var i = 0; i < data.rows.length; i++) {
                                total += data.rows[i].amount;
                            }
                            var oldTotal = $("#total").val();
                            if (total != oldTotal) {
                                $("#total").textbox('setValue', total);
                                $.messager.show({
                                    title: '提示',
                                    msg: "报销单总金额已变化，请注意保存！"
                                });
                            }

                        }
                    });

                   
                 

                });
             
                var url;
                function newEntry() {
                    $('#dlg').dialog('open').dialog('center').dialog('setTitle', '新增分录');                   
                    rowId = uuid(16, 10);
                    url = "../../Financial/ExpenseClaimEntyHandle?claimId=" + claimId + "&method=insert" + "&rowId=" + rowId;
                    $('#projectNo').combobox({
                        mode: 'remote',  //模式： 远程获取数据
                        url: '/Common/AutoComplete_ProjectNo',  //远程数据请求地址
                        valueField: 'projectName', 　　//value对应的属性字段
                        textField: 'projectNo',　　　 //text对应的属性字段
                        formatter: function (row) {
                            var opts = $(this).combobox('options');
                            return row[opts.textField] + " " + row[opts.valueField];
                        },
                        onChange: function (newValue, oldValue) {
                            $("#projectName").textbox('setValue', newValue);
                        }

                    });
                    $('#fm').form('clear');
                }
                function editEntry() {
                    var row = $('#dg').datagrid('getSelected');
                    if (row) {
                        $('#dlg').dialog('open').dialog('center').dialog('setTitle', '修改分录');                       
                        $('#projectNo').combobox({
                            mode: 'remote',  //模式： 远程获取数据
                            url: '/Common/AutoComplete_ProjectNo',  //远程数据请求地址
                            valueField: 'projectName', 　　//value对应的属性字段
                            textField: 'projectNo',　　　 //text对应的属性字段
                            formatter: function (row) {
                                var opts = $(this).combobox('options');
                                return row[opts.textField] + " " + row[opts.valueField];
                            },
                            onChange: function (newValue, oldValue) {
                                $("#projectName").textbox('setValue', newValue);
                            }

                        });
                        url = "../../Financial/ExpenseClaimEntyHandle?claimId=" + claimId + "&method=update" + "&rowId=" + row.rowId;
                        $('#fm').form('load', row);
                    }
                }
                function saveEntry() {
                    $('#fm').form('submit', {
                        url: url,
                        queryParams:{ projectNo2:$("#projectNo").combobox('getText')},
                        onSubmit: function () {
                            return $(this).form('validate');
                        },
                        success: function (result) {
                            var result = eval('(' + result + ')');
                            if (result.errorMsg) {
                                $.messager.show({
                                    title: 'Error',
                                    msg: result.errorMsg
                                });
                            } else {
                                $('#dlg').dialog('close');        // close the dialog
                                $('#dg').datagrid('reload');    // reload the user data
                            }
                        }
                    });
                }
                function destroyEntry() {
                    var row = $('#dg').datagrid('getSelected');
                    if (row) {
                        $.messager.confirm('确认', '您确定要删除这条记录?', function (r) {
                            if (r) {
                                $.post('../../Financial/ExpenseClaimEntyHandle', { rowId: row.rowId, claimId: claimId, method: "delete" }, function (result) {
                                    if (result.success) {
                                        $('#dg').datagrid('reload');    // reload the user data
                                    } else {
                                        $.messager.show({    // show error message
                                            title: 'Error',
                                            msg: result.msg
                                        });
                                    }
                                }, 'json');
                            }
                        });
                    }
                }
            </script>
        </div>

    </div>
</body>
</html>
